<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        商品：<input type="text" v-model="name"><br>
        数量：<input type="text" v-model="count"><br>
        价格：<input type="text" v-model="price"><br>
        <button @click="fn">添加到购物车</button>
        <ul>
            <li v-for="item in list" v-text="item.name+'的数量是'+item.count+',单价是'+item.price+',小计'+item.sum">{{item}}</li>
            <li>{{tosum}}</li>
        </ul>
        
    </div>
</body>
<script>
   var vue= new Vue({
        el:'#app',
        data() {
            return {
                
                    name:'',
                    count:'',
                    price:'',
                    sum:'',
                list:[{
                    name:"牙刷",
                    count:5,
                    price:10,
                    sum:50
                },
                {
                    name:"牙膏",
                    count:2,
                    price:20,
                    sum:40
                },{
                    name:"镜子",
                    count:3,
                    price:30,
                    sum:90
                }]
            }
        },
        methods: {
            fn(){
                this.sum=this.price*this.count
                let goods={name:this.name,count:this.count,price:this.count,sum:this.sum}
                this.list.push(goods)
            }
        },
        computed:{
            tosum(){
                return '总计:总数---'+this.list.reduce((total,b)=>{
                    return total + b.count
                },0)
                +'总价---'+this.list.reduce((total,b)=>{
                    return total + b.sum
                },0)
            }
        }
        

    })
</script>
</html>